<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: aqua;">

        <el-button @click="OutLogin()" style="width: 100px;height: 60px;float: right;" type="danger"
          plain>退出登录</el-button>
          <span style="float: right;font-size: 40px;color: sienna;">你好，{{ store.Account.Name }}</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-col :span="25">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router
              >
              <el-sub-menu v-for="a in Url" :index="a.Id">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>{{ a.MenuName }}</span>
                </template>
                <el-menu-item v-for="b in a.Children" :index="b.Url">
                  <template #title><span>{{ b.MenuName }}</span></template>
                </el-menu-item>
              </el-sub-menu>

            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import router from '@/router'
import { useCounterStore } from '@/stores/counter'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const store = useCounterStore()
const OutLogin = () => {
  router.push({ path: "/" })
}
interface MenuItem {
  Id: string;
  Url: string;
  MenuName: string;
  Children?: MenuItem[];
}
const Url = store.Account.MenuTree as unknown as MenuItem[]

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>